<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type"        content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type"  content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>jQuery.drawer</title>
<link href="drw/styles.css" rel="stylesheet" media="all" />
<script src="drw/jquery.js" type="text/javascript"></script>
<script src="drw/scripts.js" type="text/javascript"></script>
<style type="text/css">
body {
	font-family    : "Lucida Grande", "Arial", sans-serif;
	background     : #222222;
	padding        : 20px 0 0 0;
	margin         : 0;
}

div#content {
	color          : #ffffff;
	background     : #000000;
}

div#info {
	padding        : 0 30px 30px 30px;
}

div#info h1 {
	font-size      : 36px;
	font-weight    : bold;
	padding        : 30px 0 0 0;
	margin         : 0;
}

div#info h2 {
	font-size      : 20px;
	font-weight    : bold;
	border-top     : 1px solid #111111;
	padding        : 30px 0 0 0;
	margin         : 30px 0 0 0;
}

div#info p {
	font-size      : 12px;
	line-height    : 1.6;
	padding        : 10px 0 0 0;
	margin         : 0;
}

div#info a {
	color          : #ffffff;
}

div#info pre {
	font-size      : 11px;
	font-family    : "Courier New", monospace;
	line-height    : 1.4;
	color          : #99ff99;
	background     : #222222;
	padding        : 10px;
	margin         : 10px 0;
}

div#info em {
	font-style     : normal;
	color          : #ff0099;
}

div.sample p {
	font-size      : 24px;
	font-weight    : bold;
	line-height    : 1.6;
	color          : #ffff00;
	padding        : 20px;
	margin         : 0;
}
</style>
<style type="text/css">
ul#drw_tabs, div#drw { width: 85%; }
</style>
</head>
<body>



<!--============= DRAWER ============-->
<ul id="drw_tabs">
	<li><a href="sample.html">&laquo; Back</a></li>
	<li><a href="#hello" rel="drw">Hello</a></li>
	<li><a href="#sample_icon" rel="drw">Icon View</a></li>
	<li><a href="#sample_list" rel="drw">List View</a></li>
	<li><a href="sample_ajax.html" rel="drw">Ajax</a></li>
	<li><a href="http://www.google.com/" target="_blank">No Drawer</a></li>
</ul>
<!--============ /DRAWER ============-->



<div id="content">
<div id="drw"></div>
<div id="info">
<div>
	<h1>jQuery.drawer (Flexible Sample)</h1>
</div>



<div>
	<h2>How to change width of jQuery.drawer</h2>
	<p>
		Overwrite the <em>width</em> of jQuery.drawer's CSS styles.<br />
		For example:
	</p>
	<pre>&lt;style type="text/css"&gt;
ul#drw_tabs, div#drw { width: <em>85%</em>; }
&lt;/style&gt;</pre>
	<p>
		Or edit CSS file "drw/styles.css".
	</p>
</div>
</div>
</div>



<div id="hello" class="sample">
	<p>Hello jQuery.drawer!</p>
</div>



<ul id="sample_icon" class="drw_icon_view">
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
	<li>
		<div class="drw_img"><img src="sample.gif" alt="sample" /></div>
		<div class="drw_info">
			<h6><a href="#">item's title</a></h6>
			<p>item's description is here. item's description is here.</p>
		</div>
	</li>
</ul>



<ul id="sample_list" class="drw_list_view">
	<li>
		<a href="#">
			<span class="drw_title">item's title</span>
			<span class="drw_desc">item's description is here. item's description is here.</span>
			<span class="drw_date">2008.05.01</span>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="drw_title">item's title</span>
			<span class="drw_desc">item's description is here. item's description is here.</span>
			<span class="drw_date">2008.05.01</span>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="drw_title">item's title</span>
			<span class="drw_desc">item's description is here. item's description is here.</span>
			<span class="drw_date">2008.05.01</span>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="drw_title">item's title</span>
			<span class="drw_desc">item's description is here. item's description is here.</span>
			<span class="drw_date">2008.05.01</span>
		</a>
	</li>
</ul>



</body>
</html>